<template>
  <div>
    <Main type="form">
      <el-row>
        <el-col :span="6">
          <div class="moni">
            <img
              v-if="type == 2"
              src="http://oss.ztwlxx.cn/%E7%AD%89%E7%BA%A7%E5%8D%A1%E9%A2%86%E5%8F%96%E5%90%8E.png"
              width="100%"
              height="100%"
            />
            <img
              v-if="type == 1"
              src="http://oss.ztwlxx.cn/%E5%9B%BA%E5%AE%9A%E5%8D%A1%E9%A2%86%E5%8F%96%E5%90%8E.png"
              width="100%"
              height="100%"
            />
          </div>
        </el-col>
        <el-col :span="18">
          <el-form ref="form" label-width="130px" :model="form" :rules="rules">
            <Title :title="'基本信息'" />

            <el-form-item label="会员卡名称" prop="title">
              <el-input
                v-model="form.title"
                class="form-input"
                size="medium"
                placeholder="请输入会员卡名称"
                :maxlength="10"
                style="line-height: 20px;"
                show-word-limit
              ></el-input>
            </el-form-item>
            <el-form-item label="卡号设置" prop="">
              <el-radio v-model="form.radio" label="1"
                >系统自动生成（默认）</el-radio
              >
            </el-form-item>
            <el-form-item
              label="有效期"
              class="add-form-hintColor"
              prop="validity"
            >
              领取后&nbsp;&nbsp;
              <el-input
                v-model="form.validity"
                placeholder="请输入天数"
                class="form-min-input"
                size="medium"
              >
                <template slot="append"
                  >天</template
                >
              </el-input>
              &nbsp;&nbsp;生效
            </el-form-item>
            <el-form-item class="add-form-hintColor" prop="indate">
              有效期&nbsp;&nbsp;
              <el-input
                v-model="form.indate"
                placeholder="请输入天数"
                class="form-min-input"
                size="medium"
              >
                <template slot="append"
                  >天</template
                >
              </el-input>
              &nbsp;&nbsp;如不输入则永久有效
            </el-form-item>
            <Title
              :title="'开卡条件'"
              :msg="
                '开卡条件只可选择成为客户以外的某一项；储值、累计消费、购买指定产品如不填写，该卡则免费领取'
              "
            />
            <div class="radiodiv">
              <div class="radiolable">
                <el-radio v-model="form.cwkh" label="1"
                  >成为客户（默认）</el-radio
                >
              </div>
            </div>

            <div class="radiodiv">
              <div class="radiolable">
                <el-radio v-model="condition" :label="1">储值</el-radio>
              </div>
              <el-form-item label="储值" class="wItem" prop="storedCZ">
                <el-input
                  v-model="form.storedCZ"
                  placeholder="请输入金额"
                  size="medium"
                  class="form-min-input"
                  :disabled="condition != 1"
                >
                  <template slot="append"
                    >元</template
                  >
                </el-input>
              </el-form-item>
              <el-form-item label="赠送余额" class="wItem1" prop="">
                <el-input
                  v-model="form.storedZS"
                  placeholder="请输入金额"
                  class="form-min-input"
                  size="medium"
                  :disabled="condition != 1"
                >
                  <template slot="append"
                    >元</template
                  >
                </el-input>
              </el-form-item>
              <el-form-item label="赠送积分" class="wItem1" prop="">
                <el-input
                  v-model="form.storedJF"
                  placeholder="请输入积分"
                  class="form-min-input"
                  size="medium"
                  :disabled="condition != 1"
                >
                  <template slot="append"
                    >分</template
                  >
                </el-input>
              </el-form-item>
            </div>
            <div class="radiodiv">
              <div class="radiolable">
                <el-radio v-model="condition" :label="2">累计消费</el-radio>
              </div>
              <el-form-item class="wItem2" prop="">
                <el-input
                  v-model="form.storedXFY"
                  placeholder="请输入金额"
                  class="form-min-input"
                  size="medium"
                  :disabled="condition != 2"
                >
                  <template slot="append"
                    >元</template
                  >
                </el-input>
              </el-form-item>
              <el-form-item class="wItem2" prop="">
                <el-input
                  v-model="form.storedXFC"
                  placeholder="请输入次数"
                  class="form-min-input"
                  size="medium"
                  :disabled="condition != 2"
                >
                  <template slot="append"
                    >次</template
                  >
                </el-input>
              </el-form-item>
            </div>
            <div class="radiodiv">
              <div class="radiolable">
                <el-radio v-model="condition" :label="4">开卡费用</el-radio>
              </div>
              <el-form-item class="wItem2" prop="">
                <el-input
                  v-model="form.storedKKFY"
                  placeholder="请输入金额"
                  class="form-min-input"
                  size="medium"
                  :disabled="condition != 4"
                >
                  <template slot="append"
                    >元</template
                  >
                </el-input>
              </el-form-item>
            </div>
            <div
              class="radiodiv add-form-hintColor"
              style="font-size: 12px;margin-bottom: 22px;"
            >
              <div class="radiolable ">
                <el-radio v-model="condition" :label="3">购买指定产品</el-radio>
              </div>
              <el-button
                type="primary"
                :disabled="condition != 3"
                @click="selectShop(2, '', shopData)"
                >选择商品</el-button
              >
              &nbsp;&nbsp;&nbsp; 商品最多可选择4件
            </div>

            <div class="shop-box">
              <div
                v-for="(item, index) in shopData"
                :key="index"
                class="shop-box-chlid"
              >
                <div class="shop-box-chlid-img">
                  <img
                    :src="
                      $store.state.qiniu +
                        item.goods_cover +
                        $store.state.imgRotate
                    "
                    width="100%"
                    height="100%"
                  />
                </div>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.goods_name"
                  placement="top"
                >
                  <div class="shop-box-chlid-font">{{ item.goods_name }}</div>
                </el-tooltip>
                <div class="shop-box-chlid-del">
                  <el-button type="text" @click="excluDel(index, 2)"
                    >删除</el-button
                  >
                </div>
              </div>
            </div>
            <Title :title="'会员权益'" />
            <div class="add-form-title" style="margin-bottom: 20px">
              <el-radio-group v-model="type" :disabled="peoples < 0">
                <el-radio label="1" border style="margin-right:0;"
                  >指定权益</el-radio
                >
                <el-radio label="2" border style="margin-right:0;"
                  >等级权益</el-radio
                > </el-radio-group
              >&emsp;
              <span>会员类型设置完成，一经使用不可再次编辑</span>
            </div>
            <div v-if="type == 1" class="tables">
              <div class="tables-authority">
                <div
                  v-for="(item, index) in authorityData"
                  :key="index"
                  class="tables-authority-chlid"
                >
                  {{ item.name }}
                  &nbsp;
                  <i
                    class="el-icon-error"
                    style="color:#C0C4CC;"
                    @click="cancel(item.rule_id)"
                  ></i>
                </div>
              </div>
              <div
                style="margin-top:10px;font-size:12px;"
                class="add-form-hintColor"
              >
                <el-button plain @click="addAuthority('权益')"
                  >添加权益</el-button
                >
              </div>
            </div>
            <div v-if="type == 2">
              <Table :data="tableData" style="width:80%;">
                <el-table-column label="会员等级">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.name"
                      placeholder="请输入内容"
                      size="small"
                    >
                    </el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="成长值范围">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.grow_left"
                      size="medium"
                      style="width:80px;"
                      disabled
                    ></el-input>
                    <el-input
                      v-if="scope.$index != tableData.length - 1"
                      v-model="scope.row.grow_right"
                      size="medium"
                      style="width:80px;"
                      @blur="growthTag(scope.row.grow_right, scope.$index)"
                    ></el-input>
                    <el-input
                      v-else
                      size="medium"
                      disabled
                      style="width:80px;"
                      value="无穷大"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="" label="选择权益">
                  <template slot-scope="scope">
                    <span
                      v-for="(item, index) in scope.row.quanyiArr"
                      :key="index"
                      >{{ item.name }}&nbsp;&nbsp;&nbsp;</span
                    >
                    <el-button
                      v-if="scope.row.quanyiArr.length > 0"
                      type="text"
                      @click="addAuthority('等级', scope.$index)"
                      >修改</el-button
                    >
                    <el-button
                      v-else
                      type="text"
                      @click="addAuthority('等级', scope.$index)"
                      >选择</el-button
                    >
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="80px" fixed="right">
                  <template slot-scope="scope">
                    <el-button type="text" @click="delLevel(scope.$index)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </Table>
              <div
                style="margin-top:10px;font-size:12px;"
                class="add-form-hintColor"
              >
                <el-button
                  plain
                  :disabled="tableData.length >= 10"
                  @click="addLevel"
                  >添加等级</el-button
                >
                &emsp; 会员等级可添加10级
              </div>
            </div>
            <Title
              :title="'会员专属商品'"
              :msg="
                '只允许会员购买的商品，会员商品不可重复选择; 商品最多可选择6件'
              "
            />

            <div
              style="margin-top:10px;font-size:12px;"
              class="add-form-hintColor"
            >
              <el-button
                type="primary"
                @click="selectShop(3, 'exclusive', exclusiveData)"
                >选择商品</el-button
              >
            </div>
            <div class="exclusiveShopBox">
              <div
                v-for="(item, index) in exclusiveData"
                :key="index"
                class="exclusiveshopbox-chlid"
              >
                <div class="exclusiveshopbox-chlid-img">
                  <img
                    :src="
                      $store.state.qiniu +
                        item.goods_cover +
                        $store.state.imgRotate
                    "
                    width="100%"
                    height="100%"
                  />
                </div>
                <div class="exclusiveshopbox-chlid-font">
                  <div class="one">
                    {{ item.goods_name }}
                  </div>
                  <div class="two">
                    <span v-if="item.low_goods_price == item.up_goods_price"
                      >￥{{ item.low_goods_price }}</span
                    >
                    <span v-else
                      >￥{{ item.low_goods_price }} - ￥{{
                        item.up_goods_price
                      }}</span
                    >
                  </div>
                </div>
                <div class="exclusiveshopbox-chlid-del">
                  <i
                    class="el-icon-error"
                    style="color:#C0C4CC;font-size:20px;"
                    @click="excluDel(index, 3)"
                  ></i>
                </div>
              </div>
            </div>
          </el-form>
        </el-col>
      </el-row>
    </Main>
    <Footer>
      <el-button plain @click="$emit('out')">取 消</el-button>
      <el-button type="primary" @click="submit">保 存</el-button>
    </Footer>

    <el-dialog :visible.sync="dialogVisibleQy" width="40%" class="dialogqy">
      <div slot="title" class="dialogTitle">选择权益</div>
      <div class="content">
        <p>已开启的权限</p>
        <el-select v-model="qy" placeholder="请选择" @change="selects">
          <el-option
            v-for="(item, index) in qyArr"
            :key="item.authority_id"
            :label="item.name"
            :value="index"
          >
          </el-option>
        </el-select>
      </div>

      <el-table
        :data="qyArrData"
        style="width: 100%;border: 1px solid #e0e0e0;
     border-radius: 6px;"
      >
        <el-table-column property="name" label="权益名称"> </el-table-column>
        <el-table-column label="操作" width="80" fixed="right">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.rule_id != disid"
              size="mini"
              type="text"
              :disabled="
                disid != '' &&
                  scope.row.rule_id != disid &&
                  scope.row.authority_id == authid
              "
              @click="qySelectTap(scope.row)"
            >
              选择
            </el-button>
            <el-button
              v-else
              size="mini"
              type="text"
              @click="cancel(scope.row.rule_id)"
            >
              取消
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <shop
      :dialog-visible="dialogVisible"
      :data-json="dataJson"
      @close="close"
    />
  </div>
</template>
<script>
import { VIPCARDLIST, CHOICEAUTHORITYLIST, SETVIPCARD } from "../service";

export default {
  components: {
    shop: () => import("publicCom/shop")
  },
  props: {
    editCardId: {
      type: String,
      default: ""
    }
  },
  data() {
    var validitys = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入天数"));
      } else {
        let num = parseInt(value);
        if (isNaN(num)) {
          callback(new Error("请输入数字"));
        } else {
          this.form.validity = num;
        }

        if (num < 0) {
          callback(new Error("天数不能小于0天"));
        }
        if (num > 10) {
          callback(new Error("天数不能大于10天"));
        } else {
          callback();
        }
      }
    };
    var indates = (rule, value, callback) => {
      if (value === "" || value === null) {
        callback();
      } else {
        let num = parseInt(value);

        if (isNaN(num)) {
          callback(new Error("请输入数字"));
        } else {
          this.form.indates = num;
        }

        if (num < 1) {
          callback(new Error("天数不能小于1天"));
        }
        if (num > 7300) {
          callback(new Error("天数不能大于7300天"));
        } else {
          callback();
        }
      }
    };
    return {
      dialogVisibleQy: false,
      dialogVisible: false,
      dataJson: {},
      form: {
        title: "",
        radio: "1",
        indate: "",
        validity: 0,
        storedCZ: "",
        storedZS: "",
        storedJF: "",
        storedXFY: "",
        storedXFC: "",
        storedKKFY: "",
        cwkh: "1",
        radios: 3
      },
      rules: {
        title: [{ required: true, message: "请输入名称", trigger: "blur" }],
        validity: [{ validator: validitys, trigger: "blur" }],
        indate: [{ validator: indates, trigger: "blur" }],
        num: [{ required: true, message: "请输入天数", trigger: "blur" }]
      },
      condition: -1,
      type: "1",
      tableData: [],
      authorityData: [],
      shopData: [],
      exclusiveData: [],
      qy: "",
      qyArr: [],
      qyArrData: [],
      searchs: "",
      shopList: [],
      authid: "",
      disid: "",
      tablidx: -1,
      typeShop: "",
      peoples: ""
    };
  },
  created() {
    if (this.editCardId) {
      this.getVip();
    }
    this.getList();
  },
  methods: {
    excluDel(i, typeShop) {
      this.typeShop = typeShop;
      if (typeShop === 2) {
        this.shopData.splice(i, 1);
      }
      if (typeShop === 3) {
        this.exclusiveData.splice(i, 1);
      }
    },
    qySelectTap(e) {
      if (this.tablidx !== -1) {
        this.tableData[this.tablidx].quanyiArr.push(e);
      } else {
        this.authorityData.push(e);
      }
      this.dialogVisibleQy = false;
    },
    cancel(e) {
      let arr;
      if (this.tablidx !== -1) {
        arr = this.tableData[this.tablidx].quanyiArr;
      } else {
        arr = this.authorityData;
      }
      arr.forEach((es, idx) => {
        if (es.rule_id === e) {
          arr.splice(idx, 1);
          this.dialogVisibleQy = false;
          this.disid = "";
          this.authid = "";
        }
      });
    },
    selects(e) {
      let arr;
      this.qyArrData = this.qyArr[e].rule;
      if (this.tablidx !== -1) {
        arr = this.tableData[this.tablidx].quanyiArr;
      } else {
        arr = this.authorityData;
      }
      arr.forEach(ele => {
        this.qyArrData.forEach(es => {
          if (ele.rule_id === es.rule_id) {
            this.disid = es.rule_id;
            this.authid = es.authority_id;
          }
        });
      });
    },
    addAuthority(v, i) {
      this.qy = "";
      this.qyArrData = [];
      let arr;
      if (v === "等级") {
        this.tablidx = i;
        arr = this.tableData[this.tablidx].quanyiArr;
      } else {
        this.tablidx = -1;
        arr = this.authorityData;
      }
      arr.forEach(ele => {
        this.qyArrData.forEach(es => {
          if (ele.rule_id === es.rule_id) {
            this.disid = es.rule_id;
            this.authid = es.authority_id;
          }
        });
      });
      this.dialogVisibleQy = true;
    },
    addLevel() {
      let arr = this.tableData;
      if (arr.length < 10) {
        arr.push({
          name: "",
          grow_left: 0,
          grow_right: 0,
          authority_ids: [],
          quanyiArr: []
        });
      }
      if (arr.length > 1) {
        arr[arr.length - 2].grow_right = arr[arr.length - 2].grow_left + 1;
        arr[arr.length - 1].grow_left = arr[arr.length - 2].grow_right + 1;
      }
    },
    delLevel(i) {
      let arr = this.tableData;
      if (i >= 1) {
        arr.splice(i, 1);
        arr[i].grow_left = arr[i - 1].grow_right + 1;
      } else {
        arr.splice(i, 1);
        if (arr.length >= 1) {
          arr[0].grow_left = 0;
        }
      }
    },
    growthTag(e, i) {
      if (isNaN(parseInt(e))) {
        this.tableData[i].grow_right = 0;
      } else {
        this.tableData[i].grow_right = parseInt(e);
      }
      let arr = this.tableData;
      arr.forEach((ele, idx) => {
        if (idx > i) {
          if (ele.grow_right <= ele.grow_left) {
            ele.grow_right = parseInt(ele.grow_left) + 1;
          }
          if (ele.grow_right > ele.grow_left) {
            ele.grow_left = parseInt(arr[idx - 1].grow_right) + 1;
          }
          if (ele.grow_right <= arr[idx - 1].grow_right) {
            ele.grow_right = parseInt(ele.grow_left) + 1;
          }
        } else {
          if (arr[i].grow_right <= arr[i].grow_left) {
            arr[i].grow_right = parseInt(arr[i].grow_left) + 1;
          }
        }
      });
    },

    close(e) {
      if (e) {
        if (this.typeShop === 2) {
          this.shopData = e;
        }
        if (this.typeShop === 3) {
          this.exclusiveData = e;
        }
      }
      this.dialogVisible = false;
    },
    selectShop(typeShop, flag, dataList) {
      this.typeShop = typeShop;
      this.dialogVisible = true;
      this.dataJson.typeShop = typeShop;
      this.dataJson.flag = flag;
      this.dataJson.shopDataList = dataList;
    },

    async getVip() {
      await VIPCARDLIST({ card_id: this.editCardId }).then(res => {
        let { code, data, msg } = res;
        if (code === 200) {
          this.form.title = data.title;
          this.form.indate = data.indate;
          this.form.validity = data.validity;
          this.condition = parseInt(data.condition);
          data.stored = data.stored.split(",");
          if (this.condition === 1) {
            this.form.storedCZ = data.stored[0];
            this.form.storedZS = data.stored[1];
            this.form.storedJF = data.stored[2];
          } else if (this.condition === 2) {
            this.form.storedXFY = data.stored[0];
            this.form.storedXFC = data.stored[1];
          } else if (this.condition === 3) {
            this.shopData = data.appointGoods;
          } else {
            this.form.storedKKFY = data.stored[0];
          }
          this.type = data.type;
          if (this.type === "1") {
            this.authorityData = data.authority;
          } else {
            this.tableData = JSON.parse(data.authority);
          }
          this.exclusiveData = data.exclusiveGoods;
          this.peoples = data.peoples;
        } else {
          this.$message.error(msg);
        }
      });
    },
    async getList() {
      await CHOICEAUTHORITYLIST().then(res => {
        let { code, data } = res;
        if (code === 200) {
          this.qyArr = data;
        }
      });
    },
    async submit() {
      let authority = [];
      let exclusiveShop = [];
      let stored;
      if (this.type === "1") {
        if (this.authorityData.length > 0) {
          this.authorityData.forEach(ele => {
            authority.push(ele.rule_id);
          });

          authority = authority.join(",");
        }
      } else {
        if (this.tableData.length > 0) {
          let arr = this.tableData;
          arr.forEach(ele => {
            ele.authority_ids = [];
            ele.quanyiArr.forEach(e => {
              ele.authority_ids.push(e.rule_id);
            });
            ele.authority_ids = ele.authority_ids.join(",");
          });
          authority = JSON.stringify(arr);
        }
      }

      if (this.exclusiveData.length > 0) {
        this.exclusiveData.forEach(ele => {
          exclusiveShop.push(ele.goods_id);
        });
        exclusiveShop = exclusiveShop.join(",");
      }
      if (this.condition === 1) {
        stored = `${this.form.storedCZ},${this.form.storedZS},${this.form.storedJF}`;
      } else if (this.condition === 2) {
        stored = `${this.form.storedXFY},${this.form.storedXFC}`;
      } else if (this.condition === 3) {
        stored = [];
        this.shopData.forEach(ele => {
          stored.push(ele.goods_id);
        });
        if (stored.length > 0) {
          stored = stored.join(",");
        }
      } else {
        stored = this.form.storedKKFY;
      }
      await this.$refs["form"].validate(valid => {
        if (valid) {
          SETVIPCARD({
            title: this.form.title,
            indate: this.form.indate,
            validity: this.form.validity,
            type: this.type,
            condition: this.condition,
            stored,
            authority,
            exclusive_shop: exclusiveShop,
            card_id: this.editCardId
          }).then(res => {
            let { code, msg } = res;
            if (code === 200) {
              this.$message.success(msg);
              this.$emit("out");
            } else {
              this.$message.error(msg);
            }
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.moni {
  width: 90%;
  max-width: 300px;
  height: 482px;
  background: #eeeeee;
}
.radiodiv {
  width: 100%;
  // height: 40px;
  display: flex;
  line-height: 40px;
  // margin-bottom: 22px;
  .radiolable {
    display: inline-block;
    width: 130px;
  }
}
.shop-box {
  margin-bottom: 22px;
  .shop-box-chlid {
    background: #ffffff;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    width: 610px;
    height: 80px;
    margin-bottom: 10px;
    padding: 10px 0 0 10px;
    .shop-box-chlid-img {
      width: 60px;
      height: 60px;
      float: left;
      border-radius: 6px;
      overflow: hidden;
    }
    .shop-box-chlid-font {
      width: 400px;
      height: 60px;
      line-height: 60px;
      float: left;
      margin-left: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .shop-box-chlid-del {
      float: right;
      width: 50px;
      height: 60px;
      line-height: 60px;
    }
  }
}
.exclusiveShopBox {
  width: 80%;
  margin-bottom: 22px;
  display: flex;
  flex-wrap: wrap;
  .exclusiveshopbox-chlid {
    width: 32%;
    height: 90px;
    background: #ffffff;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    margin: 10px 10px 0 0;
    padding: 10px 0 0 10px;
    .exclusiveshopbox-chlid-img {
      width: 70px;
      height: 70px;
      overflow: hidden;
      border-radius: 6px;
      float: left;
    }
    .exclusiveshopbox-chlid-font {
      width: 50%;
      height: 70px;
      float: left;
      margin-left: 10px;
      overflow: hidden;
      .one {
        width: 100%;
        height: 44px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .two {
        font-size: 12px;
        width: 100%;
        height: 26px;
        line-height: 26px;
        color: #ff2525;
      }
    }
    .exclusiveshopbox-chlid-del {
      float: right;
      width: 32px;
      height: 70px;
      line-height: 70px;
    }
  }
}
.dialogqy {
  .dialogTitle {
    width: 100%;
    border-bottom: 1px solid #e0e0e0;
    padding: 18px;
  }
  .content {
    width: 100%;
    height: 80px;
    margin-bottom: 20px;
    p {
      height: 40px;
    }
  }
  .dialog-footer {
    width: 100%;
    display: inline-block;
    text-align: center;
  }
}
</style>
<style>
.wItem {
  width: 25%;
}
.wItem1 {
  width: 25%;
}
.wItem > .el-form-item__label {
  width: 60px !important;
  color: #999999;
}
.wItem1 > .el-form-item__label {
  width: 70px !important;
  color: #999999;
}
.wItem2 > .el-form-item__label {
  /* width: 0px !important; */
  color: #999999;
}
.wItem > .el-form-item__content {
  margin-left: 0 !important;
}
.wItem1 > .el-form-item__content {
  margin-left: 0 !important;
}
.wItem2 > .el-form-item__content {
  margin-left: 0 !important;
  margin-right: 30px;
}

.dialogqy > .el-dialog__header {
  padding: 0;
}
</style>
